<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
.box{
    width: 700px;
    margin: 100px auto;
}
.box>label{
    font-size: 18px;
}
.box>input{
    height: 30px;
    line-height: 30px;
    text-indent: 15px;
    border: 1px solid #8bc58b;
    /*取消外边框 轮廓*/
    outline: none;
}
.box>span{
    display:inline-block;
    height: 30px;
    width: 200px;
    line-height: 30px;
    text-indent: 15px;
    /*垂直方向对齐方式*/
    vertical-align: middle;

}
.wrong{
        display: inline-block;
        border: 1px solid #f9b098;
        color: #ff2f66;
        background: #ffdcd0 url(./imgs/wrong.png) no-repeat left;
}
.right{
        display: inline-block;
        border: 1px solid #c9ddc9;
        color: #189189;
        background: #dfffdf url(./imgs/right.png) no-repeat left;
}
</style>
<body>
    <div class="box">
        <label for="score">wed:</label>
        <input type="text"id="score" placeholder="请输入高数成绩">
        <span></span>
    </div>
</body>
<script>
    window.onload = function(){
        var spa = document.querySelector("span");
        var inputs = document.querySelector("input");
        //失去焦点
        inputs.onblur = function(){
            var val = inputs.value;
            if(val==''){
                spa.className="wrong";
                spa.innerText="分数不能为空";
                return
            }
            //判断参数是不是一个数  如果不是number 返回true  是number 返回fasel
            if(isNaN(val)){
                spa.className="wrong";
                spa.innerText='请输入数字';
                return
            }
            if(Number(val)>150 || Number(val)<0){
                spa.className="wrong";
                spa.innerText='成绩范围是0~150';
                return
            }
            spa.className="right";
                spa.innerText=val+'数据合法';
        }
    }
</script>
</html>